<template>
  <div
    class="panel-left-container"
    :style="{ '--row-num': personnelDvScrollBoardConf.rowNum }"
  >
    <DataPanel
      class="panel-item-container"
      title="实时人员"
      :height="50"
      icon="/static/img/park/general/personnel-icon.webp"
    >
      <div class="personnel-container">
        <InfoCard class="info-card-container" :data="personnelOverviewData">
          <template #left>
            <img
              class="personnel-flag-item"
              src="/static/img/park/general/personnel.webp"
            />
          </template>
        </InfoCard>

        <RadioGroup
          :options="personnelRadioGroupOptionsOptions"
          :active-key="0"
          enabled-slot
        >
          <template #0>
            <div class="line-charts-container">
              <div class="line-charts-btn-container">
                <RadioGroup
                  :options="personnelChartRadioGroupOptionsOptions"
                  :active-key="0"
                  @change="personnelChartRadioGroupChangeEvent"
                />
              </div>
              <chart-view
                class="line-charts"
                :chart-option="personnelMultipleLineOption"
                :auto-resize="true"
                height="100%"
              />
            </div>
          </template>
          <template #1>
            <dv-scroll-board
              class="scroll-board"
              :config="personnelDvScrollBoardConf"
            />
          </template>
        </RadioGroup>
      </div>
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="实时车辆"
      :height="50"
      icon="/static/img/park/general/car.webp"
    >
      <div class="car-container">
        <InfoCard class="info-card-container" :data="carOverviewData">
          <template #left>
            <chart-view
              class="personnel-flag-item"
              :chart-option="gaugeOption"
              :auto-resize="true"
              height="100%"
            />
          </template>
        </InfoCard>

        <RadioGroup
          :options="carRadioGroupOptionsOptions"
          :active-key="0"
          enabled-slot
        >
          <template #0>
            <div class="line-charts-container">
              <div class="line-charts-btn-container">
                <RadioGroup
                  :options="personnelChartRadioGroupOptionsOptions"
                  :active-key="0"
                  @change="carChartRadioGroupChangeEvent"
                />
              </div>
              <chart-view
                class="line-charts"
                :chart-option="carMultipleLineOption"
                :auto-resize="true"
                height="100%"
              />
            </div>
          </template>
          <template #1>
            <dv-scroll-board
              class="scroll-board"
              :style="{ '--row-num': carDvScrollBoardConf.rowNum }"
              :config="carDvScrollBoardConf"
            />
          </template>
        </RadioGroup>
      </div>
    </DataPanel>
  </div>
</template>

<script>
import { gaugeOptionHandler } from "./configs/gauge.conf";
import { multipleLineOptionHandler } from "./configs/line.conf";
import DataPanel from "@/components/park/dataPanel.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";
import InfoCard from "../InfoCard/InfoCard.vue";

//#region 临时展示数据--START
import {
  generatePersonnelData,
  generateCarData,
  generateFlowStatisticsData
} from "../../temp/data";
// #endregion 临时展示数据--END

// dataV 公共配置
const dvScrollBoardCommConf = {
  headerBGC: "rgba(145, 169, 178, 0.1)",
  oddRowBGC: "rgba(0,0,0,0)",
  evenRowBGC: "rgba(0,0,0,0)",
  rowNum: 5,
  align: ["center", "center", "center", "center", "center"],
  columnWidth: [55, 90, 77, 100, 100]
};

const dvScrollBoardPersonnelConf = {
  header: ["序号", "姓名", "出入类型", "位置", "时间"],
  ...dvScrollBoardCommConf
};

const dvScrollBoardCarConf = {
  header: ["序号", "车牌号", "出入类型", "位置", "时间"],
  ...dvScrollBoardCommConf
};

export default {
  name: "LeftPanel",
  components: {
    DataPanel,
    RadioGroup,
    InfoCard
  },
  data() {
    return {
      // 实时人员相关数据
      personnelOverviewData: {
        total: 0,
        totalDesc: "实时人数",
        subFistTotal: 0,
        subFistTotalDesc: "进场人次",
        subLastTotal: 0,
        subLastTotalDesc: "离场人次"
      },
      personnelRadioGroupOptionsOptions: [
        {
          label: "人流量统计",
          key: 0
        },
        {
          label: "人流量记录",
          key: 1
        }
      ],
      personnelChartRadioGroupOptionsOptions: [
        {
          label: "今日",
          key: 0
        },
        {
          label: "本月",
          key: 1
        },
        {
          label: "本年",
          key: 2
        }
      ],
      personnelStatisticsList: [],
      personnelDvScrollBoardConf: {
        data: [],
        ...dvScrollBoardPersonnelConf
      },

      // 实时车辆相关数据
      carOverviewData: {
        total: 0,
        totalDesc: "车位总数",
        subFistTotal: 0,
        subFistTotalDesc: "空闲",
        subLastTotal: 0,
        subLastTotalDesc: "已用",
        useRate: 25
      },
      carRadioGroupOptionsOptions: [
        {
          label: "车流量统计",
          key: 0
        },
        {
          label: "车流量记录",
          key: 1
        }
      ],
      carStatisticsList: [],
      carDvScrollBoardConf: {
        data: [],
        ...dvScrollBoardCarConf
      }
    };
  },

  computed: {
    gaugeOption() {
      const { useRate } = this.carOverviewData;
      const chartData = { name: "车位使用率", value: useRate };
      return gaugeOptionHandler(chartData);
    },

    personnelMultipleLineOption() {
      return multipleLineOptionHandler(this.personnelStatisticsList, "人");
    },

    carMultipleLineOption() {
      return multipleLineOptionHandler(this.carStatisticsList, "辆");
    }
  },

  created() {
    this.getPersonnelOverviewData();
    this.getCarOverviewData();
  },

  methods: {
    /**
     * 实时人员图表 radio group change 事件
     * @param {String|Number} key 切换时 key 值
     */
    personnelChartRadioGroupChangeEvent(key) {
      this.personnelStatisticsList = generateFlowStatisticsData(key);
    },

    /**
     * 实时车辆图表 radio group change 事件
     * @param {String|Number} key 切换时 key 值
     */
    carChartRadioGroupChangeEvent(key) {
      this.carStatisticsList = generateFlowStatisticsData(key);
    },

    /**
     * 获取实时人员概览数据方法
     */
    getPersonnelOverviewData() {
      this.personnelOverviewData.total = 1226;
      this.personnelOverviewData.subFistTotal = 786;
      this.personnelOverviewData.subLastTotal = 440;

      // 记录数据
      const res = generatePersonnelData(1);
      const reminderList = this.personnelDvScrollBoardDataConfHandler(res);
      this.personnelDvScrollBoardConf = {
        data: reminderList,
        ...dvScrollBoardPersonnelConf
      };

      // 图表数据
      this.personnelStatisticsList = generateFlowStatisticsData(0);
    },

    /**
     * 获取实时车辆概览数据方法
     */
    getCarOverviewData() {
      this.carOverviewData.total = 372;
      this.carOverviewData.subFistTotal = 279;
      this.carOverviewData.subLastTotal = 93;
      this.carOverviewData.useRate = 25;

      // 记录数据
      const res = generateCarData(1);
      const reminderList = this.carDvScrollBoardDataConfHandler(res);
      this.carDvScrollBoardConf = {
        data: reminderList,
        ...dvScrollBoardCarConf
      };

      // 图表数据
      this.carStatisticsList = generateFlowStatisticsData(0);
    },

    /**
     * 人员 dataV 轮播表格数据处理方法
     * @param {Object} data 传入需要处理的数据
     * @return {Array} 处理后的数据
     */
    personnelDvScrollBoardDataConfHandler(data) {
      const reminderList = [];
      data.forEach((item, index) => {
        const reminderItemData = [
          index,
          item.name,
          item.type,
          item.point,
          item.time
        ];
        reminderList.push(reminderItemData);
      });

      return reminderList;
    },

    /**
     * 车辆 dataV 轮播表格数据处理方法
     * @param {Object} data 传入需要处理的数据
     * @return {Array} 处理后的数据
     */
    carDvScrollBoardDataConfHandler(data) {
      const reminderList = [];
      data.forEach((item, index) => {
        const reminderItemData = [
          index,
          item.name,
          item.type,
          item.point,
          item.time
        ];
        reminderList.push(reminderItemData);
      });

      return reminderList;
    }
  }
};
</script>

<style lang="less" scoped>
// 公共变量
@row-item-height: 3vh;

// InfoCard 公共样式
.info-card-container {
  margin-top: 0.75rem;
  margin-bottom: 0.9375rem;
  padding: 0.5rem 1rem;
  box-sizing: border-box;

  .personnel-flag-item {
    width: 5.3125rem;
    height: 5.3125rem;
  }
}

// dv-scroll-board 公共样式
.scroll-board {
  width: 100%;
  height: calc(2rem + (@row-item-height * var(--row-num)));
  margin-top: 0.9375rem;

  /deep/ .header {
    font-size: 0.75rem;
    color: #fff;
  }

  /deep/ .row-item {
    font-size: 0.75rem;
    height: @row-item-height;
  }
}

// 折线图公共样式
.line-charts-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(2rem + (@row-item-height * var(--row-num)));

  .line-charts-btn-container {
    position: absolute;
    top: 7%;
    right: 5%;
  }

  .line-chart {
    width: 100%;
    height: calc(2rem + (@row-item-height * var(--row-num)));
  }
}

.panel-left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    // 实时人员区域样式
    .personnel-container {
      display: flex;
      flex-direction: column;
    }

    // 实时车辆区域样式
    .car-container {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
